<template lang="pug">
  .footer
    ul
      li(
        v-for='item in items'
        
        )
        router-link(:to="{name: item.path}")
          img(:src='item.img')
          | {{item.message}}
</template>
<script>
export default {
  name: 'vfooter',
  data() {
    return {
      items: [
        {
          path: 'home',
          img: require('static/img/icon-1.png'),
          message: '首页',
        },
        {
          path: 'food',
          img: require('static/img/icon-4.png'),
          message: '美食菜单',
        },
        {
          path: 'heath',
          img: require('static/img/icon-5.png'),
          message: '健康养生',
        },
        {
          path: 'user',
          img: require('static/img/icon-7.png'),
          message: '个人中心',
        },
      ]
    }
  },

}
</script>
<style lang="scss" scoped>
.footer { 
  width: $width;
  height: $footer-height;
  font-family: 'AdobeHeitiStd-Regular';
  font-size: $footer-font;
  border-top: 1px solid $footer-border;
  ul {
    @extend %flex-box;
    a {
      @extend %flex-child;
      img {
        margin-bottom: .625rem /* 10/16 */;
      }
    }
  }
}
</style>

